<template>
  <el-dialog title="选择口味" @close="close" :visible="open">
    <el-table :data="list" stripe>
      <el-table-column
        v-for="(item, index) in list_json"
        :key="index"
        v-bind="item"
      >
        <template v-if="item.prop === 'status'" v-slot="scope">
          <el-switch
            disabled
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" v-slot="scope">
        <el-button
          size="mini"
          type="text"
          icon="el-icon-edit"
          @click="selectTaste(scope.row)"
          >选择</el-button
        >
      </el-table-column>
    </el-table>
    <el-pagination
      style="text-align: right; margin-top: 20px"
      background
      @size-change="
        (val) => {
          this.pager.pageSize = val;
          this.get_list();
        }
      "
      @current-change="
        (val) => {
          this.pager.pageNum = val;
          this.get_list();
        }
      "
      :current-page="pager.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pager.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pager.totalRow"
    >
    </el-pagination>
  </el-dialog>
</template>

<script>
import { omit } from "lodash";
export default {
  props: {
    open: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    this.get_list();
  },
  data() {
    return {
      list: [],
      list_json: [
        { label: "口味", prop: "name" },
        { label: "单价", prop: "price" },
        { label: "状态", prop: "status" },
      ],
      pager: {
        pageNum: 1,
        pageSize: 10,
        totalRow: 0,
      },
    };
  },
  methods: {
    get_list() {
      this.$http
        .get("/taste", {
          params: {
            ...this.pager,
            ...this.form,
          },
        })
        .then((res) => {
          this.list = res.rows;
          this.pager = omit(res, ["msg", "status", "rows"]);
        });
    },
    close() {
      this.$emit("close");
    },
    selectTaste(row) {
      this.$emit("fun", row);
      this.close();
    },
  },
};
</script>

<style>
</style>
